<template>
  <div class="header flex_s_p">
    <div class="header_l flex">
      <div class="logo_box">
        LOGO
      </div>
      <div class="icons flex">
        <div>
          <i class="iconfont icon-arrow-left-bold"></i>
        </div>
        <div>
          <i class="iconfont icon-arrow-right-bold"></i>
        </div>
      </div>
      <div class="search_box">
        <i class="iconfont icon-search"></i>
        <span>搜索</span>
      </div>
    </div>

    <div class="header_r flex">
      <div class="user_info flex">
        <div class="user_img_box">
          <img
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1950539968,2294772994&fm=26&gp=0.jpg"
            alt=""
          />
        </div>
        <div>
          忘不了丶丶丶
        </div>
      </div>
      <div class="icons">
        <i class="iconfont icon-setting"></i>
        <i class="iconfont icon-minus-bold"></i>
        <i class="iconfont icon-close-bold"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Header',
  setup() {
    console
  }
})
</script>
<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 20px;
  height: 60px;
  background: @red;
  color: @white;
  .header_l {
    .logo_box {
      flex: 0 0 200px;
    }

    .icons {
      flex: 0 0 100px;
    }

    .search_box {
      flex: 0 0 160px;
      border-radius: 30px;
      background: #d23c3f;
      height: 40px;
      color: #e6564a;
      padding: 0 10px;
      line-height: 40px;
      .iconfont {
        font-size: 18px;
      }
      span {
        margin-left: 4px;
      }
    }
  }

  .header_r {
    .user_info {
      margin-right: 6px;
      .user_img_box {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        box-sizing: border-box;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
    }

    .icons {
      .iconfont {
        margin: 0 7px;
      }
    }
  }
}
</style>
